<template>
  <div>
    <cell class="order-item-list" v-for="(item, i) in datalist" :key="i">
      <i class='icon-remove' @click="$emit('remove','12345')"></i>
      <div class="top">
        <div class="left">
          <avatar username="Lairenna Doe" :src="item.creator && item.creator.avatar" :size="40"></avatar>
        </div>
        <div class="right">
          <div class="right-1">
            <div>
              {{item.creator.nickname}}
              <!-- <span class="score">{{9.8}}分</span> -->
            </div>
            <div>
              <span>{{getTime(item.createTime)}}</span>
            </div>
          </div>
          <div class="right-2">
            <span class="order-price">¥{{item.price}}</span>
            <span class="order-status-btn" @click="$emit('getOrder', item._id)">抢单</span>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="main-item">
          <div class="label">备注</div>
          <div class="value">{{item.desc}}</div>
        </div>
        <div class="main-item">
          <div class="label">开始时间</div>
          <div class="value">{{item.startTime|datetimeformat}}</div>
        </div>
        <div class="main-item">
          <div class="label">结束时间</div>
          <div class="value">{{item.endTime|datetimeformat}}</div>
        </div>
        <!-- <div class="main-item">
          <div class="label">联系方式</div>
          <div class="value">{{item.tel}}</div>
        </div> -->
      </div>
    </cell>
  </div>
</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import Avatar from 'vue-avatar';
import { Previewer, XButton, Cell } from 'vux';
import { formatMsgTime } from '../../js/getTime'
@Component({
  components: { Avatar, Previewer, XButton, Cell }
})
export default class Item extends Vue {
  @Prop(Array) datalist
  mainList = [
    { name: '备注', val: 'desc' },
    { name: '开始时间', val: 'startTime' },
    { name: '结束时间', val: 'endTime' },
    { name: '联系方式', val: 'tel' }
  ]
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
}
</script>
<style lang="less">
  .order-item-list:before {
    content: initial !important;
  }
  .order-item-list {
    // font-size: 12px;
    background: #ffffff;
    direction: flex;
    box-sizing: border-box;
    border-radius: 5%;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 5px;
    position: relative;
    .main {
      .main-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        // border-bottom: 1px dashed #dddddd;
        .label {
          width: 100px;
        }
        .value {
          width: 280px;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: right;
          white-space: nowrap;
        }
      }
      // .main-item:last-child {
      //   border: none;
      // }
    }
    .score {
      color: #666666;
      font-size: 14px;
      margin-left: 10px;
    }
    .order-price {
      color: red;
      font-size: 16px;
      margin-right: 15px;
      line-height: 54px;
    }
    .icon-remove {
      position: absolute;
      top: 7px;
      right: 10px;
      font-size:14px;
    }
    .weui-cell__ft {
      text-align: left;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      span {
        margin-left: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #EFA79B;
      }
    }
    .order-status-btn {
      color: #666666;
      font-size: 14px;
    }
    .item-title {
      color: #666666;
    }
    .con-head {
      font-size: 14px;
    }
    .top {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .left {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .right {
      // font-size: 12px;
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .weui-btn {
        // font-size: 12px;
        overflow: initial;
      }
    }
    .right-1 {
      display: flex;
      flex-direction: column;
    }
    .right-2 {
      display: flex;
      align-items: center;
    }
    .bot {
      height: 48px;
      display: flex;
      align-items: center;
    }
  }
</style>


